<?php
    include('header.php');
?>
    <script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
    <script src="js/js.func.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/colorbox/colorbox.css" type="text/css" media="all" />
    
    <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
    <script src="js/languages/jquery.validationEngine-th.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
    
    <div id="contact_us">
        <h3>ติดต่อเรา</h3>
	
        <!--<div id="contact_detail">-->
            <div id="contact_left">
                <div id="contact_map">
                    <a href="map.html" class="aColorBox"><img id="map_button" src="images/map_button.jpg" alt="บริษัท ซีทรูโฮม จำกัด" /></a>
                </div>
                <p class="company">บริษัท ซีทรูโฮม จำกัด</p>
                <p class="address">
                    56/45 ถ.รัตนาธิเบศร์ ต.เสาธงหิน อ.บางใหญ่ จ.นนทบุรี 11140<br />
                    ติดต่อ 089-666-7646, 087-345-6223 <br />
                    แฟกซ์ 02-926-5978<br />
                    อีเมล์ : info@zeetruehome.com
                </p>
            </div>
            <div id="contact_right">
                <form id="contact_frm" method="post" class="formular" >
                    <table id="contact_form">
                        <tr>
                            <td colspan="3">
                                <p class="text_1">ติดต่อเราผ่านเว็บไซต์</p>
                                <p class="text_2">เพื่อรอการติดต่อกลับจากสถาปนิก</p>
                            </td>
                        </tr>
                        <tr>
                            <td class="contact_form_tdleft contact_form_tdname">
                                ชื่อ - นามสกุล :
                            </td>
                            <td colspan="2" class="contact_form_tdname">
                                <input name="name" type="text" class="input_name input_long validate[required]" id="req1" />
                            </td>
                        </tr>
                        <tr>
                            <td class="contact_form_tdleft contact_form_tdtel">
                                โทรศัพท์ :
                            </td>
                            <td colspan="2" class="contact_form_tdtel">
                                <input name="tel" type="text" class="input_tel input_long validate[required,custom[phone]]" id="req2" />
                            </td>
                        </tr>
                        <tr>
                            <td class="contact_form_tdleft contact_form_tdemail">
                                อีเมล์ :
                            </td>
                            <td colspan="2" class="contact_form_tdemail">
                                <input name="email" type="text" class="input_email input_long validate[required,custom[email]]" id="req3" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="contact_form_selet_size">
                                <select name="area" class="mySelect3">
                                    <option value="0">------------ ขนาดบ้านที่ต้องการ ------------</option>
                                    <option value="100-200 ตารางเมตร">100-200 ตารางเมตร</option>
                                    <option value="201-300 ตารางเมตร">201-300 ตารางเมตร</option>
                                    <option value="301-400 ตารางเมตร">301-400 ตารางเมตร</option>
                                    <option value="401-500 ตารางเมตร">401-500 ตารางเมตร</option>
                                    <option value="มากกว่า 500 ตารางเมตร ขึ้นไป">มากกว่า 500 ตารางเมตร ขึ้นไป</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="contact_form_tdleft contact_form_tdland_size">
                                ขนาดพื้นที่ดิน
                            </td>
                            <td colspan="2" class="contact_form_tdland_size">
                                <input id="req4" name="land_size" type="text" class="input_land_size input_smallvalidate[required,custom[number]] " /> ตร.วา
                            </td>
                        </tr>
                        <tr>
                            <td class="contact_form_tdleft contact_form_tdwidth">
                                หน้ากว้าง
                            </td>
                            <td class="contact_form_tdwidth">
                                <input name="width" id="req5" type="text" class="input_width input_small" /> เมตร
                            </td>
                            <td>
                                ลึก <input name="deep" type="text" id="req6" class="input_deep input_small" /> เมตร
                            </td>
                        </tr>
                        <tr>
                            <td class="contact_form_tdzone">
                                สถานที่สร้าง
                            </td>
                            <td colspan="2" class="contact_form_tdzone">
                                <input name="build_zone" id="req7" type="text" class="input_build_zone input_long validate[required]" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="contact_form_tdmore">
                                รายละเอียดเพิ่มเติม
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="contact_form_tdtextarea">
                                <textarea name="msg" class="input_msg"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="contact_form_tdsend">
                                <img src="images/contact_form_send_button.png" alt="Send" id="contact_frm_bt" />
                                <img src="images/ajax-loader.gif" class="display_none" id="ajax_loader" />
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="clear">&nbsp;</div>
        <!--</div>-->
    </div>
    <script>
	$(document).ready(function(){
            $("#contact_frm").validationEngine();
            
	    $('.aColorBox').colorbox();
	    
	    $(".mySelect3").styleSelect({styleClass: "selectDark"});
            
            $('#contact_frm_bt').click(function(){
                if( $("#contact_frm").validationEngine('validate') ){
                    $('#contact_frm_bt').css('display','none');
                    $('#ajax_loader').css('display','inline');
                    var frm_data = $('#contact_frm').serialize();
                    
                    $.post("function/sent-contact-mail.php", frm_data ,function(data){
                        if(trim(data)=='success'){
                            alert('ข้อความถูกส่งเรียบร้อยแล้ว กรุณารอการติดต่อกลับจากสถาปนิกค่ะ');
                            $("#contact_frm")[0].reset();
                        }else{
                            alert('ไม่สามารถส่งข้อความได้ กรุณาลองใหม่อีกครั้งค่ะ');
                        }
                        $('#contact_frm_bt').css('display','inline');
                        $('#ajax_loader').css('display','none');
                    }/*, "json"*/);
                }
            });
        });
    </script>
<?php
    include('footer.php');
?>